{% extends 'base.html' %}

{% block title %}Verify {{ certificate.certificate_number }} — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container" style="max-width:40rem;">
    <div class="text-center mb-4">
      <div class="display-6 {% if is_valid %}text-success{% else %}text-danger{% endif %} mb-2">
        {% if is_valid %}
          <i class="bi bi-shield-check"></i>
        {% else %}
          <i class="bi bi-shield-x"></i>
        {% endif %}
      </div>
      <h1 class="h3 fw-bold">Certificate verification</h1>
      <p class="text-muted mb-0">Official authenticity check for {{ site_settings.institute_name }}</p>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
      <div class="px-4 py-3 {% if is_valid %}bg-success{% else %}bg-danger{% endif %} text-white d-flex justify-content-between align-items-center">
        <span class="fw-semibold text-uppercase small letter-spacing">
          {% if is_valid %}Valid certificate{% else %}Revoked{% endif %}
        </span>
        <span class="font-monospace small">{{ certificate.certificate_number }}</span>
      </div>
      <div class="card-body p-4">
        <dl class="row mb-0">
          <dt class="col-sm-4 text-muted small">Candidate</dt>
          <dd class="col-sm-8 fw-semibold">
            {{ display_name }}
            {% if certificate.privacy_initials_only %}
              <span class="badge text-bg-light border ms-1">Privacy: initials</span>
            {% endif %}
          </dd>

          <dt class="col-sm-4 text-muted small">Course</dt>
          <dd class="col-sm-8">{{ certificate.course_title_snapshot }}</dd>

          <dt class="col-sm-4 text-muted small">Result</dt>
          <dd class="col-sm-8">
            <span class="badge text-bg-primary">{{ score_band_label }}</span>
            <div class="small text-muted mt-1">{{ certificate.assessment_label }}</div>
            <div class="small text-muted">Exact percentage is not shown publicly.</div>
          </dd>

          <dt class="col-sm-4 text-muted small">Issued</dt>
          <dd class="col-sm-8">{{ certificate.issued_at|date:"d M Y" }}</dd>

          <dt class="col-sm-4 text-muted small">Status</dt>
          <dd class="col-sm-8">
            {% if is_valid %}
              <span class="text-success fw-semibold">Valid</span>
            {% else %}
              <span class="text-danger fw-semibold">Revoked</span>
              {% if certificate.revoke_reason %}
                <div class="small text-muted mt-1">{{ certificate.revoke_reason }}</div>
              {% endif %}
              {% if certificate.revoked_at %}
                <div class="small text-muted">Revoked {{ certificate.revoked_at|date:"d M Y" }}</div>
              {% endif %}
            {% endif %}
          </dd>
        </dl>

        {% if is_valid and certificate.badge_image %}
        <hr>
        <div class="text-center mb-3">
          <img src="{{ certificate.badge_image.url }}" alt="Verified skill badge"
               class="img-fluid rounded-3 shadow-sm" style="max-width:16rem;">
          <div class="small text-muted mt-2">Verified skill badge</div>
        </div>
        {% endif %}

        {% if is_valid %}
        <hr>
        <div class="small">
          <div class="fw-semibold mb-1">For freelancers</div>
          <p class="text-muted mb-2">Share this credential on Fiverr / Upwork with a verify link employers can trust.</p>
          <textarea class="form-control form-control-sm mb-2" rows="3" readonly id="public-freelancer-blurb">{{ freelancer_blurb }}</textarea>
          <button type="button" class="btn btn-sm btn-outline-primary" id="copy-public-blurb">Copy profile line</button>
          {% if certificate.badge_image %}
          <a class="btn btn-sm btn-outline-success" href="{{ certificate.badge_image.url }}" download>Badge image</a>
          {% endif %}
        </div>
        <script>
        (function () {
          var btn = document.getElementById('copy-public-blurb');
          var ta = document.getElementById('public-freelancer-blurb');
          if (!btn || !ta) return;
          btn.addEventListener('click', function () {
            ta.select();
            try { navigator.clipboard.writeText(ta.value); btn.textContent = 'Copied'; }
            catch (e) { document.execCommand('copy'); btn.textContent = 'Copied'; }
          });
        })();
        </script>
        {% endif %}
      </div>
    </div>

    <p class="small text-muted text-center mt-4 mb-0">
      Always verify certificates at this official URL. If status shows revoked, the credential is no longer recognized.
    </p>
  </div>
</section>
{% endblock %}